<template>
  <el-container class="home_container">
    <el-header>
      <div>
        <img src="../assets/logo.png"
             alt="">
        <span>BU23 MES</span>
      </div>
      <div>
        <el-dropdown style="padding-right:20px;">
          <span class="el-dropdown-link">
            <div class="drop_item">
              <i class="el-icon-position"></i>
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-row>
              <el-col :span="8"
                      :offset="0">
                <div style="padding-top: 5px;padding-left: 2px;">
                  <img class="tableau-icon"
                       src="../assets/tableau-icon.jpg"
                       alt="tableua集成"
                       target="_blank"
                       @click="redirectTableau">
                  <span style="font-size: 12px;">Tableau</span>
                </div>
              </el-col>
              <el-col :span="8"
                      :offset="1">
                <div style="padding-top: 5px;">
                  <img class="tableau-icon"
                       src="../assets/fine-report.jpg"
                       alt="tableua集成"
                       target="_blank"
                       @click="redirectTableau">
                  <span style="font-size: 12px;">FineReport</span>
                </div>
              </el-col>
            </el-row>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand"
                     trigger="click">
          <span class="el-dropdown-link">
            {{lang}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown"
                            align="center">
            <el-dropdown-item style="min-width: 60px;"
                              command="中文">中文</el-dropdown-item>
            <el-dropdown-item style="min-width: 60px;"
                              command="英文">英文</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="info"
                   @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="IsCollapse?'64px':'200px'">
        <div class="toggle-button"
             @click="toggleCollapse"
             id="toggle-button">
          <i :class="IsCollapse?'iconfont iconchtab':'iconfont iconthumbnail'"></i>
        </div>

        <!-- 侧边栏-->
        <el-menu background-color="#333744"
                 text-color="#fff"
                 active-text-color="#409eff"
                 :unique-opened="true"
                 :collapse="IsCollapse"
                 :collapse-transition="false"
                 :router="true"
                 :default-active="activePath">
          <!-- 1级菜单-->
          <el-submenu :index="item.Id+' '"
                      v-for="item in menuList"
                      :key="item.Id">
            <!--1级菜单模板-->
            <template slot="title">
              <i :class="iconsObj[item.Id]"></i>
              <span>{{item.MenuName}}</span>
            </template>
            <!-- 2级菜单-->
            <el-menu-item :index="subItem.Path==''?subItem.Id+' ':subItem.Path"
                          v-for=" subItem in item.Chlid"
                          :key="subItem.Id"
                          @click="saveNavState(subItem.Path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{subItem.MenuName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 左侧菜单数据
      menuList: [],
      // 指定根list的图标
      iconsObj: {
        1: 'iconfont iconqushi',
        2: 'iconfont iconyonghu1',
        3: 'iconfont iconyamaxun',
        4: 'iconfont iconqushi',
        5: 'iconfont iconyaoshui'
      },
      IsCollapse: false,
      activePath: '',
      lang: '多语言'
    }
  },
  created () {
    this.testVuex()
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
    this.lang = window.sessionStorage.getItem('lang') || '多语言'
  },
  methods: {
    handleCommand (value) {
      if (value === null || value === '') {
        window.sessionStorage.setItem('lang', '多语言')
        this.lang = '多语言'
      } else {
        this.lang = value
        // localStorage.lang = this.lang === '中文' ? 'zh' : 'en'
        this.$i18n.locale = this.lang === '中文' ? 'cn' : 'en'
        window.sessionStorage.setItem('lang', this.lang)
      }
    },

    testVuex () {
      this.$store.commit('increment')
    },
    logout () {
      // 1.清空sessionstorage
      window.sessionStorage.clear()
      console.log(this.$store.state.menus)
      this.$router.push('/login')
    },
    // 跳转到tableau
    async redirectTableau () {
      // 1.先根据用户获取token
      const {
        data: res
      } =
        await this.$http.get('/Login/LoginAndMenu/GetTableauToken', {
          params: {
            token: window.sessionStorage.token
          }
        })
      // 2.跳转url
      window.open('http://172.23.20.54:8000/trusted/' + res + '/#/home')
    },
    //  获取所有菜单
    async getMenuList () {
      const {
        data: res
      } = await this.$http.get('/Login/LoginAndMenu/Menu')
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$store.commit('generalMenus', res.data.root)
      this.menuList = res.data.root // JSON.parse(JSON.stringify([res.data]))
    },
    // 点击切换折叠展开
    toggleCollapse () {
      this.IsCollapse = !this.IsCollapse
      const togglebutton = document.getElementById('toggle-button')
      if (!this.IsCollapse) {
        togglebutton.style.width = '200px'
      } else {
        togglebutton.style.width = '64px'
      }
    },
    // 增加tab功能,取消面包屑导航
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}

</script>

<style lang="less" scoped>
.el-header {
  background-color: #37314d;
  display: flex;
  justify-content: space-between;
  padding-left: 0%;
  align-items: center;
  color: #fff;
  font-size: 20px;
}

.el-header > div {
  display: flex;
  align-items: center;
}

.el-header > div > span {
  margin-left: 15px;
}

/* .el-header>div>img {
     width: 150px;
    border-radius: 50%;
    background-color: #eee
  } */

.el-aside {
  background-color: #333744;
}

.el-aside > .el-menu {
  /* 取消右边不对齐 */
  border-right: none;
}

.el-main {
  background-color: #eaedf1;
}

.home_container {
  height: 100%;
}

.el-submenu {
  text-align: left;
}

.iconfont {
  margin-right: 10px;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  width: auto;
}

.el-button {
  margin-left: 15px;
}

.tableau-icon {
  border-radius: 50%;
  /* border: solid 1px #eee; */
  /* box-shadow: 0 0 10px #ddd; */
  width: 20px;
  height: 20px;
  padding-left: 15px;
}

.tableau-icon:hover {
  cursor: pointer;
}

.el-col {
  padding: 10px;
}

.el-icon-position {
  color: #eee;
  size: 50px;
}

.drop_item {
  font-size: 20px;
}

.el-icon-position {
  cursor: pointer;
}
</style>
